import React from 'react'
import '../assets/css/goodslist.css'
import {getCate,getGoods} from '../request/api'
import { NavBar, Icon } from 'antd-mobile';
import { SearchBar, WhiteSpace } from 'antd-mobile';
 class Home extends React.Component{
    constructor(){
        super()
        this.state={
          list:[],
          list1:[]
        }
      }
      componentDidMount(){
        getCate()
        .then(res=>{
          if(res.code==200){
            this.setState({
              list:res.list
            })
          }
        })
        getGoods()
        .then(res=>{
          if(res.code==200){
            this.setState({
              list1:res.list
            })
          }
        })
      }
 render(){
    const {list,list1}=this.state
    return (<div id='as'>
    <NavBar
    className='NavBar'
      icon={<Icon type="left" />}
      onLeftClick={() => console.log('onLeftClick')}
      rightContent={[
        <Icon key="1" type="ellipsis" />,
      ]}
      >商品列表</NavBar>
      <SearchBar placeholder="请搜索" ref={ref => this.autoFocusInst = ref} />
      <WhiteSpace />
      
     <ul className='uu'>
       <li>综合推荐</li>
       <li>销量</li>
       <li>价格</li>
       <li>好评度</li>
       <li>店铺</li>
       <li>分类</li>
     </ul>
     <div className='z'>筛选11.11大促销商品</div>
     <ul className='ul2'>
                {
                  list1.map(item=>{
                    return  <li className='li' key={item.id}>
                    <img className='img' src={item.img} alt="" />
                    <div>
                        <span className='span'>限时</span>
                        <span>溪牧原山茶花洁面...</span>
                        <p>敏感肌可用，控油祛痘......</p>
                        <div className='div'>
                          <div>
                              <span className='q'>￥99</span>
                              <span className='q1'>￥1099</span>
                              <p>99人付款</p>
                          </div>
                         <div>
                             <button className='btn'>加入购物车</button>
                         </div>
                        </div>
                    </div>
                  </li>
                  })
                }
                 </ul> 
    </div>)
    }
}
 export default Home